{% extends "v1/base.html" %}
{% block content %}

{% for item in data  %}      
    {% if item['show'] %} 
        <div id="{{ item['key'] }}" class="data"></div>
        <!-- 时间轴单位-{{ item['value'] }}-->
        <script type="text/javascript">
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById("{{ item['key'] }}"));  
            
            function randomData() {
                return Math.round(Math.random()*1000);
            }
            
            var dateStr = "{{ item['x'] }}";
            var xAxisList = dateStr.split(';');
            var xAxisData = [];

            xAxisList.forEach(function (element) {
                xAxisData.push(element);
            });    
            option = {
                title: {
                    text: '放款-{{ item['value'] }}'
                },
                tooltip : {
                    trigger: 'axis',
                    axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                        type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                toolbox: {
                    feature: {
                        dataView: {show: true, readOnly: false},
                        magicType: {show: true, type: ['line', 'bar']},
                        restore: {show: true},
                        saveAsImage: {show: true}
                    }
                },   
                legend: {
                    data:['成功人数','失败人数']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis : [
                    {
                        type : 'category',
                        data : xAxisData
                    }
                ],
                yAxis : [
                    {
                        type : 'value'
                    }
                ],
                series : [
                    {
                        name:'成功人数',
                        type:'bar',
                        stack: '放款',
                        data:{{ item['succUsers'] }}
                    },
                    {
                        name:'失败人数',
                        type:'bar',
                        stack: '放款',
                        data:{{ item['failUsers']}}
                    }

                ]
            };
            // 使用刚指定的配置项和数据显示图表。  
            myChart.setOption(option); 
        </script>

    {% endif  %} 
{% endfor %}
   
{% endblock %}